<!-- 数据分析 -->
<template>
  <div class="newTest">
    <!-- 因子超标时段分析 -->
    <div class="dataChartCnt">
      <div class="searchBox">
        <el-form
          label-position="top"
          inline
          :model="searchForm"
          size="mini"
          style="max-height: 100px"
        >
          <el-form-item>
            <p slot="label" class="miniLabel">站点选择</p>
            <el-select
              v-model="searchForm.waterstation"
              placeholder="请选择站点"
            >
              <el-option
                v-for="item in stationList"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <p slot="label" class="miniLabel">时间段</p>
            <el-date-picker
              v-model="timePicker"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <p class="searchBtns">
              <el-button type="success" class="greenBtn" @click="getChartsData"
                >确定</el-button
              >
            </p>
          </el-form-item>
        </el-form>
      </div>
      <div class="dataChartBox">
        <div
          class="chart"
          v-for="(option, index) in waterPerlodList"
          :key="index"
        >
          <el-button
            size="mini"
            class="openchart"
            @click="openDetailChart(option)"
          >
            <i class="iconfont iconquanping"></i>
          </el-button>
          <lineChart
            :option="option"
            :isShow="option.show"
            style="display: flex; flex-grow: 1"
          ></lineChart>
        </div>
        <p class="noData" v-show="isNoData">暂无数据</p>
      </div>
    </div>
    <!-- 全屏弹出框 -->
    <el-dialog
      :visible.sync="detailChartVisible"
      width="80%"
      custom-class="historyChart"
      append-to-body
    >
      <div class="deatailChartCnt">
        <div class="deatailChart" id="deatailChart"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import lineChart from "../components/charts.vue";
import common from "@/plugins/common";
import { waterPerlod } from "@/http/api";
export default {
  data() {
    return {
      timePicker: [common.changeDateToString(
      new Date(new Date().getTime() - 518400000)
    ),common.changeDateToString(new Date())],
      searchForm: {
        waterstation: "",
      },
      waterPerlodList: {},
      detailChart: null,
      detailChartVisible: false,
      // 水质
      waterfactorField: {},
      standard: {},
      //日均分析值
      factorField: [],
      factorStatus: {},
      isMeanNoData: true,
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  async created() {
    await this.getStationListName({ dataType: null });
    this.searchForm.waterstation = this.stationList
      ? this.stationList[0]
      : "沙江4#";
    this.getChartsData();
  },
  components: {
    lineChart,
  },
  computed: {
    ...mapGetters({
      stationList: "getStationList",
    }),
    isNoData() {
      if (!this.waterPerlodList) return;
      return !Object.values(this.waterPerlodList)
        .map((v) => v.show)
        .includes(true);
    },
  },
  methods: {
    ...mapActions(["getStationListName"]),
    // 筛选获取各类型初始值
    async getChartsData() {
      let params = {
        starttime: this.timePicker[0] + " 00:00:00",
        lasttime: this.timePicker[1] + " 23:59:59",
        waterstation: this.searchForm.waterstation,
      };
      await waterPerlod(params).then((res) => {
        this.waterPerlodList = res.data;
        this.waterfactorField = res.factorField;
        this.initCharts();
      });
    },
    /**
     * 因子超标时段分析
     */
    initCharts() {
      let optionColor = {
        pH: "#A3A6F6",
        cod: "#F47FC1",
        ammoniaNitrogen: "#5BB0F0",
        phosphorus: "#FF8282",
        nitrogen: "#F0D65B",
        nickel: "#67EBAB",
        cuprum: "#F09C5B",
        chromium: "#5DD3EC",
        prussiate: "#D4A3F6",
        zinc: "#5BF0E6",
      };
      this.$nextTick(() => {
        for (let i in this.waterPerlodList) {
          this.waterPerlodList[i] = {
            xAxis: {
              axisTick: {
                inside: true,
                alignWithLabel: true,
              },
              type: "category",
              data: Object.keys(this.waterPerlodList[i]).map(
                (item) => item + ":00"
              ),
              name: "时间",
            },
            grid: {
              left: "12%",
            },
            yAxis: {
              axisTick: {
                inside: true,
                alignWithLabel: true,
              },
              type: "value",
              name: "超标次数/次",
              minInterval: 1,
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
              },
            },
            series: [
              {
                name: "超标次数",
                type: "bar",
                data: Object.values(this.waterPerlodList[i]).map(
                  (item) => item
                ),
                barWidth: 16,
                itemStyle: {
                  color: optionColor[i],
                },
              },
            ],
            show: true,
            title: {
              left: "center",
              text: this.waterfactorField[i],
              textStyle: {
                fontSize: 14,
              },
            },
          };
        }
      });
    },

    //打开全屏
    openDetailChart(option) {
      this.detailChartVisible = true;
      this.$nextTick(() => {
        this.detailChart = this.$echarts.init(
          document.getElementById("deatailChart")
        );
        this.initDeatailChart(option);
      });
    },
    //设置全屏图表
    initDeatailChart(option) {
      let chartOption = {
        xAxis: {
          type: "category",
          data: option.xAxis.data,
        },
        yAxis: {
          type: "value",
        },
        series: option.series,
        title: {
          left: "center",
          text: option.title.text,
        },
        show: true,
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: false,
            },
            saveAsImage: {
              pixelRatio: 2,
            },
          },
        },
      };
      this.detailChart.setOption(chartOption);
    },
  },
};
</script>

<style scoped>
.el-dialog__footer {
  display: flex;
  justify-content: center;
}

.newTest {
  min-height: 100%;
}

.newTest .title {
  position: relative;
  line-height: 70px;
  font-size: 16px;
  background: #ffffff;
  margin-bottom: 20px;
  padding-left: 30px;
}

.newTest .title::before {
  content: "";
  position: absolute;
  left: 15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}

.searchBox {
  padding: 20px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  background-color: #fff;
  display: flex;
}

.searchBox .miniLabel {
  line-height: 0;
}

.searchBtns {
  margin-top: 19px;
}

.el-dialog {
  z-index: 3000 !important;
}
.noData {
  width: 100%;
  line-height: 60px;
  text-align: center;
  color: #909399;
}
/* 因子 */
.dataChartCnt {
}

.dataChartBox {
  display: flex;
  flex-flow: row wrap;
  /* justify-content: space-between; */
  justify-content: flex-start;
  width: 100%;
  background: #ffffff;
  padding: 20px;
  box-sizing: border-box;
}

.dataChartBox .chart {
  position: relative;
  width: 31%;
  margin: 0 1%;
  height: 300px;
  min-height: 300px;
  background: #fff;
  margin-bottom: 20px;
}

.dataChartBox .chart .openchart {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 1;
}

.deatailChartCnt {
  width: 100%;
  height: 450px;
}

.deatailChartCnt .deatailChart {
  width: 100%;
  height: 100%;
}
</style>
